<template>
    <div>
        <el-form :model="formData" ref="form" :rules="rules" label-width="100px" :inline="false" status-icon
            style="padding: 10px 60px; margin: 0 auto">
            <el-form-item label="登录名称:" prop="loginName">
                <el-input v-model="formData.loginName" placeholder="请输入登录名称"></el-input>
                <span class="ant-input-suffix">初始密码：123456</span>
            </el-form-item>
            <el-form-item label="用户姓名:" prop="username">
                <el-input v-model="formData.username" placeholder="请输入用户姓名"></el-input>
            </el-form-item>
            <el-form-item label="角色:" prop="roleId">
                <template v-if="data && data.data.roleName === '租户'">
                    <span>{{ data.data.roleName }}</span>
                </template>
                <template v-else>
                    <el-select v-model="formData.roleId" value-key="" placeholder="选择角色" clearable filterable>
                        <el-option v-for="item in roleData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </template>

            </el-form-item>
            <!-- <el-form-item label="机构:" prop="organId">
                <el-tree-select v-model="formData.organId" :data="organTreeData" check-strictly
                    :props="{ children: 'children', label: 'orgAbr', value: 'id' }" :default-expand-all="true"
                    :render-after-expand="false" placeholder="请选择上级机构" clearable>
                </el-tree-select>
            </el-form-item> -->
            <el-form-item label="职位:" prop="position">
                <el-input v-model="formData.position" placeholder="请输入职位"></el-input>
            </el-form-item>
            <el-form-item label="是否经理:" prop="leaderFlag">
                <el-select v-model="formData.leaderFlag" placeholder="请选择是否经理" clearable filterable>
                    <el-option key="1" label="是" value="1" />
                    <el-option key="0" label="否" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="电话号码:" prop="phonenum">
                <el-input v-model="formData.phonenum" placeholder="请输入电话号码"></el-input>
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
                <el-input v-model="formData.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
        </el-form>
        <div class="button-container">
            <el-button type="primary" @click="onSubmit(form)">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { reactive, ref, defineEmits, onMounted, defineProps } from 'vue'
import request from '@/api/request';
import { ElMessage } from 'element-plus';
let emits = defineEmits(["close"])
const data = defineProps(['data'])


let form = ref(null)
let organTreeData = ref([])
let formData = ref({
    loginName: null,
    username: null,
    leaderFlag: null, // 是否经理
    position: null, // 职位
    phonenum: null,
    remark: null,
    roleId: null,
    organId: null
});


const onSubmit = (formEl) => {
    formEl.validate(async v => {
        if (v) {
            await request.get('user/userCount', {
                params: {
                    loginName: formData.value.loginName
                }
            }).then(response => {
                if (response.data === 0) {
                    if (data.data.id) {
                        request.put(`user/updateUser`, { ...formData.value }).then(resp => {
                            if (resp.code === 200) {
                                ElMessage({
                                    message: resp.data,
                                    type: 'success'
                                })
                                emits("close");
                            }
                        })
                    } else {
                        request.post("user/saveUser", { ...formData.value }).then(resp => {
                            if (resp.code === 200) {
                                ElMessage({
                                    message: resp.data,
                                    type: 'success'
                                })
                                emits("close");
                            }
                        })
                    }
                } else {
                    ElMessage({
                        message: '登录名在本系统中已经存在！',
                        type: 'warning'
                    })
                }
            })



        }
    })
}

const close = () => {
    emits("close")
}

const rules = reactive({
    loginName: [
        { required: true, message: '请输入登录名称！', trigger: 'blur' }
    ],
    username: [
        { required: true, message: '请输入用户姓名！', trigger: 'blur' }
    ],
    roleId: [
        { required: true, message: '请选择角色！', trigger: 'blur' }
    ]
})

let roleData = ref([])
const findRole = () => {
    request.get('role/findRoleByTenantId').then(resp => {
        if (resp.code == 200) {
            roleData.value = resp.data
        }
    })
}

const findOrgan = () => {
    request.get('organ/findOrganTree').then(resp => {
        if (resp.code == 200) {
            organTreeData.value = resp.data
        }
    })
}

onMounted(() => {
    findRole()
    findOrgan();

    if (data.data.id) {
        formData.value = { ...data.data }
    }

})
</script>

<style scoped>
.ant-input-suffix {
    position: absolute;
    right: 7%;
}
</style>
